.MagicCurtainRoot {
	position: relative;

	/* These variables must be fixed lengths to work with the positioning */
	--magic-curtain-controls-trigger-width: 44px;
	--magic-curtain-controls-trigger-height: 64px;
	--magic-curtain-controls-preview-width: 248px;
	--magic-curtain-controls-preview-height: 143px;
}

@media (min-width: 360px) {
	.MagicCurtainRoot {
		--magic-curtain-controls-trigger-width: 48px;
	}
}

@media (min-width: 440px) {
	.MagicCurtainRoot {
		--magic-curtain-controls-trigger-width: 64px;
	}
}

.MagicCurtainItem {
	position: relative;
	z-index: 0;
	--animation-duration: 600ms;
}

@media (min-width: 1280px) {
	.MagicCurtainItem {
		--animation-duration: 800ms;
	}
}

.MagicCurtainItem[data-visibility="hidden"] {
	display: none;
}

.MagicCurtainItem[data-visibility="animating-out"] {
	position: absolute;
	z-index: 1;
	inset: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.MagicCurtainItem[data-visibility="animating-out"] {
		animation-name: magic-curtain-clip;
		animation-duration: var(--animation-duration);
		animation-timing-function: ease-in-out;
	}

	.MagicCurtainItem[data-visibility="visible"]
		~ .MagicCurtainItem[data-visibility="animating-out"] {
		animation-name: magic-curtain-clip-reverse;
	}
}

/* Firefox has performance issues at high pixel count */
@media (min-width: 3000px), (min-width: 1920px) and (min-resolution: 120dpi) {
	[data-is-firefox="true"] .MagicCurtainItem[data-visibility="animating-out"] {
		animation-name: magic-curtain-fade;
		animation-duration: calc(var(--animation-duration) / 4);
		animation-timing-function: ease-in-out;
	}
}

@media (prefers-reduced-motion) {
	.MagicCurtainItem[data-visibility="animating-out"] {
		animation-name: magic-curtain-fade;
		animation-duration: calc(var(--animation-duration) / 4);
		animation-timing-function: ease-in-out;
	}
}

@keyframes magic-curtain-fade {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes magic-curtain-clip {
	0% {
		clip-path: polygon(0 0, 120% 0, 100% 100%, 0 100%);
	}
	100% {
		clip-path: polygon(0 0, -20% 0, 0 100%, 0 100%);
	}
}

@keyframes magic-curtain-clip-reverse {
	0% {
		clip-path: polygon(-20% 0, 100% 0, 100% 100%, 0 100%);
	}
	100% {
		clip-path: polygon(120% 0, 100% 0, 100% 100%, 100% 100%);
	}
}

@media (min-width: 1000px) {
	@keyframes magic-curtain-clip {
		0% {
			clip-path: polygon(0 0, 105% 0, 100% 100%, 0 100%);
		}
		100% {
			clip-path: polygon(0 0, -5% 0, 0 100%, 0 100%);
		}
	}

	@keyframes magic-curtain-clip-reverse {
		0% {
			clip-path: polygon(-5% 0, 100% 0, 100% 100%, 0 100%);
		}
		100% {
			clip-path: polygon(105% 0, 100% 0, 100% 100%, 100% 100%);
		}
	}
}

.MagicCurtainControlsRoot {
	position: relative;
	display: flex;
}

.MagicCurtainControlsItem {
	position: relative;
}

.MagicCurtainControlsTrigger {
	border: 0;
	margin: 0;
	padding: 0;
	outline: 0;
	appearance: none;
	background: none;
	font-family: inherit;
	font-size: var(--font-size-2);
	-webkit-tap-highlight-color: transparent;

	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: var(--magic-curtain-controls-trigger-width);
	height: var(--magic-curtain-controls-trigger-height);
	margin: calc(-1 * var(--space-4)) 0;
}

.MagicCurtainControlsTrigger::before {
	--magic-curtain-control-line-width: calc(var(--space-1) / 2);
	content: "";
	position: absolute;
	pointer-events: none;
	height: var(--magic-curtain-control-line-width);
	left: var(--space-1);
	right: var(--space-1);
	border-radius: var(--space-2);
	background-color: var(--gray-a8);
	transition: background-color 200ms;
}

.MagicCurtainControlsTrigger[data-visually-hidden="true"]::before {
	content: none;
	/* background-color: red; */
}

.MagicCurtainControlsTrigger[data-focused="true"]::before {
	transition-duration: 30ms;
	background-color: var(--gray-a11);
}

.MagicCurtainControlsTrigger[data-highlighted="true"]::before {
	transition-duration: 30ms;
	background-color: var(--gray-12);
}

@media (hover: none) {
	.MagicCurtainControlsPreviewViewportWrapper {
		display: none;
	}
}

.MagicCurtainControlsPreviewViewportWrapper {
	transform: translateX(
		calc(
			var(--magic-curtain-controls-offset-index) *
				var(--magic-curtain-controls-trigger-width)
		)
	);
	position: absolute;
	top: calc(-1 * var(--magic-curtain-controls-preview-height));
	left: 0;
}

.MagicCurtainControlsPreviewViewportWrapper {
	transition: transform 250ms ease-out;
}

.MagicCurtainControlsPreviewViewport {
	display: flex;
	position: relative;
	width: var(--magic-curtain-controls-preview-width);
	height: var(--magic-curtain-controls-preview-height);
	box-sizing: content-box;
	background-color: white;
	box-shadow: var(--shadow-5);
	border-radius: var(--radius-3);
	overflow: hidden;
}

.MagicCurtainControlsPreviewViewport[data-state="open"] {
	animation: scale-in 250ms ease;
}

.MagicCurtainControlsPreviewViewport[data-state="closed"] {
	animation: scale-out 250ms ease;
}

@keyframes scale-in {
	from {
		opacity: 0;
		transform: rotateX(-30deg) scale(0.9);
	}
	to {
		opacity: 1;
		transform: rotateX(0deg) scale(1);
	}
}

@keyframes scale-out {
	from {
		opacity: 1;
		transform: rotateX(0deg) scale(1);
	}
	to {
		opacity: 0;
		transform: rotateX(-10deg) scale(0.95);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.MagicCurtainControlsPreviewContent {
		transform: translateX(
			calc(
				-1 * var(--magic-curtain-controls-offset-index) * var(--magic-curtain-controls-preview-width)
			)
		);
		transition: transform 250ms ease-out;
	}
}

@media (prefers-reduced-motion) {
	.MagicCurtainControlsPreviewContent {
		position: absolute;
		top: 0;
		left: 0;
		transition: opacity 250ms ease-out;
	}
	.MagicCurtainControlsPreviewContent[data-active="false"] {
		opacity: 0;
		pointer-events: none;
		transition: opacity 250ms ease-in;
	}
}

.MagicCurtainControlsPreviewContentImage {
	display: flex;
	width: var(--magic-curtain-controls-preview-width);
	height: var(--magic-curtain-controls-preview-height);
	object-fit: cover;
	border-radius: var(--radius-4);
	border: var(--space-1) solid white;
}
